{extend name="platform/base" /}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/order.css">
<style>
body .modal.fade {
	transition: none;
	-webkit-transition: none;
}

/* 订单信息选中字体变色 */
.nav-tabs>.active>a,.nav-tabs>.active>a:hover,.nav-tabs>.active>a:focus
	{
	color: white;
}
.product-img {
    float: left;
    margin-right: 10px;
}
 .product-infor {
 	    margin-top: 8px;
    overflow: hidden;
}
.product-infor .specification {
    margin-bottom: 5px;
    color: #999;
    text-align: left;
    font-size: 12px;
}
.mod-table{margin-top:15px;-webkit-box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);padding:15px;}
.step-region{margin-bottom: 15px;border: 1px solid #e5e5e5;}
.ui-step {margin:0;padding: 14px 0 8px 0;zoom: 1;}
.ui-step li {float: left;position: relative;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;text-align: center;}
.ui-step-4 li {width: 33.3333%;}
.ui-step:after {content: "";display: table;clear: both;}
.clearfix:after, .clearfix:before {display: table;line-height: 0;content: "";}
.clearfix:after, .clearfix:after {display: table;line-height: 0;content: "";}
.info-region {
    width: 320px;
    padding: 15px 15px 100px 15px;
    border-right: 1px solid #e5e5e5;
	float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.state-region {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 20px 20px 140px 20px;
    margin-left: -1px;
    border-left: 1px solid #e5e5e5;
	    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ui-step li.ui-step-done::before, .ui-step li.ui-step-done::after, .ui-step li.ui-step-done .ui-step-number {
    background: #80CCFF;
}


.ui-step li.ui-step-done .ui-step-number::after {
    position: absolute;
    left: 0px;
    width: 17px;
    height: 20px;
    line-height: 20px;
    content: "√";
    color: rgb(255, 255, 255);
    font-family: serif;
}
.ui-step .ui-step-number {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 10px 0;
    line-height: 22px;
    background: #999;
    color: #fff;
    border-radius: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 2;
}
.ui-step li::before, .ui-step li::after {
    position: absolute;
    left: 0;
    top: 38px;
    display: block;
    content: '';
    width: 50%;
    height: 4px;
    background: #999;
    z-index: 1;
}
.ui-step li::after {
    left: 50%;
}
.ui-step li:first-child::before {
    width: 0;
}
.ui-step li:last-child::after {
    width: 0;
}
.ui-step li.ui-step-done .ui-step-title {
    color: #80CCFF;
}
.ui-step .ui-step-meta {
    color: #ccc;
}
.ui-step li.ui-step-done .ui-step-number {
    color: transparent;
}
.info-div {
    font-size: 14px;
    font-weight: bold;
}
.info-region .secured-title {
    float: right;
    font-size: 12px;
    font-weight: normal;
    color: #f60;
}
.info-table {
    margin-top: 10px;
}
.info-table th, .info-table td {
	font-size:12px;
    color: #999;
    padding: 0 0 10px 0;
    vertical-align: top;
}
.info-table th {
	font-weight: normal;
    text-align: right;
    color: #999;
    width: 66px;
}
.dashed-line {
    border-top: 1px dashed #e5e5e5;
}
.state-region .state-title .icon {
    position: absolute;
    left: -40px;
    width: 28px;
    height: 28px;
    border: 2px solid #07d;
    border-radius: 28px;
    line-height: 24px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: serif;
}
.state-region .state-title {
    position: relative;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}
.state-region .state-title .icon.info {
    color: #07d;
    border-color: #07d;
}
.state-region .state-desc {
    margin-bottom: 30px;
    color: #666;
	font-size:12px;
}
.state-region .state-desc p{
	margin: 0;
}
.zent-btn {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 2px;
    font-size: 12px;
    color: #333;
    background: #fff;
    border: 1px solid #bbb;
    text-align: center;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
.zent-btn-primary {
    color: #fff;
    background: #3283fa;
    border-color: #3283fa;
}
.state-remind {
    padding: 20px 0 0 40px;
}
.state-remind .tixing {
    color: #FF6600;
    font-size: 12px;
    margin-bottom: 10px;
}
.state-remind ul {
    padding-left: 4px;
}
.state-remind li {
    color: #999;
}
.info-goods{
	    margin: 10px 0;
}
.info-goods .ui-centered-image {
    float: left;
}
.info-goods .info-goods-content {
    margin-left: 70px;
}
.info-goods:after {
    content: "";
    display: table;
    clear: both;
}
.safeguard-log {
    border: 1px solid #e5e5e5;
    padding: 15px;
    position: relative;
}
.safeguard-log table {
    width: 100%;
}
.safeguard-log .tr-title td {
    padding: 30px 0 10px 0;
    border-bottom: 1px dashed #e5e5e5;
}
.safeguard-log .tr-title td {
    padding: 30px 0 10px 0;
    border-bottom: 1px dashed #e5e5e5;
}
.safeguard-log .tr-title td:first-child {
    font-weight: bold;
}
.safeguard-log .td-time {
    color: #999;
}
.safeguard-log .tr-title+tr td {
    padding-top: 10px;
}
.safeguard-log td {
    padding: 2px 0;
}
</style>
{/block}
{block name="main"}
<div class="mod-table">
<div class="step-region">
	<ul class="ui-step ui-step-4">
		<li class="ui-step-done"><div class="ui-step-title">买家申请退款</div><div class="ui-step-number">1</div><div class="ui-step-meta">2016-08-17 10:40:49</div></li>
		<li class="{if condition='$order_goods["refund_status"] egt 2 || $order_goods["refund_status"] lt 0'}ui-step-done{/if}"><div class="ui-step-title">商家退款处理</div><div class="ui-step-number">2</div><div class="ui-step-meta"></div></li>
		<li class="{if condition='$order_goods["refund_status"] egt 5 || $order_goods["refund_status"] lt 0'}ui-step-done{/if}"><div class="ui-step-title">退款完成</div><div class="ui-step-number">3</div><div class="ui-step-meta"></div></li>
	</ul>
</div>
<div class="step-region clearfix">
	<div class="info-region">
		<div class="info-div">退款信息</div>
		<div>
			<div class="info-goods">
				<div class="ui-centered-image" src="">
					<img src="{:__IMG($order_goods['picture_info']['pic_cover_micro'])}"></div>
					<div class="info-goods-content"><div>{$order_goods['goods_name']} - {$order_goods['sku_name']}</div>
						<div></div>
					</div>
			</div>
			<div class="dashed-line"></div>
		</div>
		<table class="info-table">
			<tbody>
				<tr><th>退款方式：</th><td><span class="color-orange">{$order_goods['refund_type'] == 1 ? '仅退款' : '退款，退货'}</span></td></tr>
				<tr style="display: table-row;"><th>退款金额：</th><td><span class="color-orange">{$order_goods['refund_require_money']}</span>元</td></tr>
				<tr><th>退款原因：</th><td>{$order_goods['refund_reason']}</td></tr>
			</tbody>
		</table>
		<!-- <div class="dashed-line"></div> -->
		<table class="info-table" style="display:none;">
			<tbody>
				<tr><th>订单编号：</th><td></td></tr>
				<tr><th>付款时间：</th><td></td></tr>
				<tr><th>买家：</th><td><p></p></td></tr>
				<tr><th>物流信息：</th><td></td></tr>
				<tr><th>运费：</th><td></td></tr>
				<tr><th>合计优惠：</th><td></td></tr>
				<tr><th>实收总计：</th><td><span class="color-orange"></span>元</td></tr>
			</tbody>
		</table>
	</div>
	<div class="state-region">
		<div style="padding: 0px 0px 30px 40px;">
			<div class="state-title"><span class="icon info">!</span>订单状态：{$order_goods['status_name']}</div>
			<!-- <div class="state-desc">
				<div>
					<div>
						<p><span>退款金额：0.01 元 </span></p>
						<p>退款方式：退至微信</p>
						<p>到账时间：2016-08-12 11:41:56</p>
					</div>
				</div>
			</div> -->
			<div class="state-action">
			{volist name="order_goods['refund_operation']" id="v" empty=""}
				<button class="zent-btn zent-btn-primary test-send-goods" onclick="refundOperation('{$v['no']}',{$order_goods['order_id']},{$order_goods['order_goods_id']})">{$v['name']}</button>
			{/volist}
			</div>
		</div>
		<div class="state-remind-region">
			<div class="dashed-line"></div>
			<div class="state-remind"><div class="tixing">牛酷提醒：</div>
				<ul><li>如果无法发货，请及时与买家联系并说明情况后进行退款；</li>
				<li>买家申请退款后，须征得买家同意后再发货，否则买家有权拒收货物；</li>
				<li>买家付款后超过7天仍未发货，将有权申请有赞客服介入发起退款维权；</li></ul>
			</div>
		</div>
	</div>
</div>
<div class="safeguard-log">
	<div class="info-div">协商记录</div>
	<table>
	{volist name='order_goods["refund_info"]' id="vo" empty=''}
		<tbody>
			<tr class="tr-title"><td>{$vo['action_way'] == 1 ? '买家' : '卖家'}</td><td class="td-time">{$vo['action_time']}</td></tr>
			<tr><td colspan="2">{$vo['action']}</td></tr>
		</tbody>
	{/volist}
<!-- 		<tbody>
			<tr class="tr-title"><td>商家</td><td class="td-time">2016-08-12 11:03:07</td></tr>
			<tr><td colspan="2">同意退款给买家，本次维权结束</td></tr>
			<tr><td class="td-meta">退款金额：</td><td>0.01</td></tr>
		</tbody>
		<tbody>
			<tr class="tr-title"><td>买家</td><td class="td-time">2016-08-12 11:02:02</td></tr>
			<tr><td colspan="2">发起了退款申请,等待商家处理</td></tr>
			<tr><td class="td-meta">退款原因：</td><td>多买/买错/不想要</td></tr>
			<tr><td class="td-meta">处理方式：</td><td>仅退款</td></tr>
			<tr><td class="td-meta">货物状态：</td><td>未收到货</td></tr>
			<tr><td class="td-meta">退款金额：</td><td>0.01</td></tr>
			<tr><td class="td-meta">退款说明：</td><td></td></tr>
			<tr><td class="td-meta">联系电话：</td><td>15234151502</td></tr>
		</tbody> -->
	</table>
</div>
</div>
{include file="platform/openDialog" /}<!-- /.modal -->
{include file="platform/Order/orderRefundAction"/}
{/block}